<div [formGroup]="configuration.formGroupReference">
    <div class="row">
        <label class="col-4 col-form-label" *ngIf="configuration.showLabel">
            {{ labelTranslationKey | translate }} {{ configuration.required ? "*" : "" }}
        </label>
        <span class="col-8 my-auto" [ngClass]="{ 'col-12': !configuration.showLabel || configuration.column }">
            <div class="d-flex flex-wrap" [ngClass]="{ 'flex-column': configuration.column }">
                <div class="form-check col-auto" *ngFor="let option of configuration.options">
                    <label class="form-check-label">
                        <input
                            class="form-check-input qa-{{ configuration.qaPrefix }}-{{ configuration.formControlId }}-{{
                                option.key
                            }}"
                            type="radio"
                            [value]="option.key"
                            [formControlName]="configuration.formControlId"
                        />
                        <span [innerHTML]="option.value"></span>
                    </label>
                </div>
                <app-form-input-error
                    class="invalid-feedback"
                    [formGroupReference]="configuration.formGroupReference"
                    [formControlId]="configuration.formControlId"
                >
                </app-form-input-error>
            </div>
        </span>
    </div>
</div>
